<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{common::css}"></div>
    <title>博客管理</title>
</head>
<body class="m-blog-body">
<!--导航-->


<div th:replace="~{common::menu(1)}"></div>
<!--二级导航-->
<div class="ui  attached pointing menu" >
    <div class="ui  container">
        <div class="right menu" >
            <a th:href="@{/admin/toBlogManage/{current}(current=1)}" class=" ui  inverted green  button" >管理</a>
            <a th:href="@{/admin/toBlogAdd}"  class=" ui    button" >发布</a>

        </div>
    </div>
</div>
<!--中间内容-->
<div class="m-padded-tb-big m-container" >
    <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header">提示</div>
            <p th:text="${message}"></p>
        </div>
        <div  class="ui  segment form" method="post">
            <input type="hidden" name="page">
            <div class="inline fields">
                <div class="filed">
                    <input type="text" name="title" placeholder="标题" autocomplete="off" >

                </div>
                <div class="filed m-padded-lr">
                    <div class="ui type selection dropdown">
                        <input type="hidden" name="typeId">
                        <i class=" ui dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div class="menu" >
                            <div  th:each="type : ${allType}" th:data-value="${type.getId()}" th:text="${type.getName()}" class="item" data-value="1"  >错误日志</div>
                        </div>
                        <a id="clear-btn"  >
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="ui teal trash alternate icon"></i>
                        </a>
                    </div>

                </div>
                <div class="filed m-padded-lr">
                    <div class="ui type selection dropdown">
                        <input type="hidden" name="published">
                        <i class="dropdown icon"></i>
                        <div class="default text">状态</div>
                        <div class="menu" >
                            <div class="item" th:data-value="1">发布</div>
                            <div class="item" th:data-value="0">草稿</div>
                        </div>
                        <a id="clear-btns"  >
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="ui teal trash alternate icon"></i>
                        </a>
                    </div>
                </div>
                <div class="field ">
                    <button  type="button" id="search-button" class="ui mini teal basic button"> <i class="search icon"></i>搜索</button>
                </div>
            </div>
        </div>
        <div id="table-container"  >
        <table th:fragment="blogList" class="ui celled center aligned table" >
            <thead>
            <tr>
                <th></th>
                <th>标题</th>
                <th>类型</th>
                <th>推荐</th>
                <th>发布</th>
                <th>时间</th>

                <th>操作</th>
            </tr>
            </thead>
            <tbody th:each="blog,iterStat : ${pages.getList()}">
            <tr>
                <td th:text="${iterStat.count}"></td>
                <td th:text="${blog.getTitle()}"></td>
                <td th:text="${blog.getFlag()}"></td>
                <td th:text="${blog.getRecommend()?'是':'否'}">是</td>
                <td th:text="${blog.getPublished()}?'发布':'草稿'"></td>
                <td th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd')}">2017-07-06</td>
                <td th:if="${(session.user.role=='admin')||(session.user.getId()==blog.getUserId())}">
                    <a th:href="@{/toBlogUpdate/{id}(id=${blog.getId()})}" class="ui mini teal basic button">编辑</a>
                    <a th:href="@{/deleteBlog/{id}(id=${blog.getId()})}" class="ui  mini red  basic button">删除</a>
                </td>
                <td th:if="${(session.user.role!='admin')&&(session.user.getId()!=blog.getUserId())}">
                    <span class="ui  mini red  basic button">无权限</span>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="7">
                    <div class="ui mini pagination menu" th:if="${pages.getPages()>1}">
                        <a  onclick="page(this)" th:attr="data-page=1" class="item">首页</a>
                        <a  onclick="page(this)" th:attr="data-page=${pages.getPageNum()-1}" class=" item" th:unless="${pages.isFirstPage}"><i class="angle double left icon" ></i>上一页</a>
                        <a onclick="page(this)"  th:attr="data-page=${pages.getPageNum()+1}" class=" item" th:unless="${pages.isLastPage}">下一页&#160;&#160;<i class="angle double right icon "></i></a>
                        <a onclick="page(this)"  th:attr="data-page=${pages.getPages()}" class="item">尾页</a>

                    </div>
                    <a th:href="@{/admin/toBlogAdd}"class="ui mini  right floated teal basic button">新增</a>
                    <p class="m-text-spaced" >当前第<span th:text="${pages.getPageNum()}"></span>页 共<span th:text="${pages.getPages()}"></span>页，
                        共<span th:text="${pages.total}" class="m-text-lined"></span>条记录</p>
                </th>
            </tr>
            </tfoot>
        </table>
        </div>
    </div>
    <br/>
    <br/>
    <br/>
</div>
<!--底部 footer-->
<div th:replace="~{common::footer}"></div>


<script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        $('.ui.dropdown').dropdown({
            on : 'hover',
        });
        //初始化消息关闭动作
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
        function page(obj) {
            $("[name='page']").val($(obj).data('page'));
            loaddata();
        }

        $("#search-button").click(function () {
            $("[name='page']").val(0);
            loaddata();
        });
        function loaddata() {
            $("#table-container").load("/admin/searchBlog", {
                title: $("[name='title']").val(),
                typeId: $("[name='typeId']").val(),
                published: $("[name='published']").val(),
                page: $("[name='page']").val()
            });
        }
        //上一页下一页查询
        function page(obj) {
            $("[name='page']").val($(obj).data("page"));
            loaddata();
        };
        //清除查询条件
        $('#clear-btn')
            .on('click', function () {
                $('.ui.type.dropdown')
                    .dropdown('clear')
                ;
            });
        $('#clear-btns')
            .on('click', function () {
                $('.ui.type.dropdown')
                    .dropdown('clear')
                ;
            });
    </script>
</body>

</html>